<template>
  <el-form ref="form" label-width="80px">
    <el-row>
      <el-col :span="6">
        <el-form-item label="学科">
          <el-select placeholder="请选择" v-model="form.subjectID">
            <el-option
              v-for="item in subjectList"
              :key="item.value"
              :label="item.label"
              :value="item.value"
            ></el-option>
            <!-- <el-option label="区域二" value="beijing"></el-option> -->
          </el-select>
        </el-form-item>
      </el-col>
      <el-col :span="6">
        <el-form-item label="二级目录">
          <el-select placeholder="请选择" v-model="form.catalogID">
            <el-option
              v-for="item in list"
              :key="item.id"
              :label="item.catalogID"
              :value="item.catalogID"
            ></el-option>
          </el-select>
        </el-form-item>
      </el-col>
      <el-col :span="6">
        <el-form-item label="标签">
          <el-select placeholder="请选择" v-model="form.tags">
            <el-option
              v-for="item in list"
              :key="item.id"
              :label="item.tags"
              :value="item.tags"
            ></el-option>
          </el-select>
        </el-form-item>
      </el-col>
      <el-col :span="6">
        <el-form-item label="关键字">
          <el-input
            placeholder="根据题干搜索"
            v-model="form.keyword"
          ></el-input>
        </el-form-item>
      </el-col>
    </el-row>

    <el-row>
      <el-col :span="6">
        <el-form-item label="试题类型">
          <el-select placeholder="请选择" v-model="form.questionType">
            <el-option label="单选" value="1"></el-option>
            <el-option label="多选" value="2"></el-option>
            <el-option label="简答" value="3"></el-option>
          </el-select>
        </el-form-item>
      </el-col>
      <el-col :span="6">
        <el-form-item label="难度">
          <el-select placeholder="请选择" v-model="form.difficulty">
            <el-option label="简单" value="1"></el-option>
            <el-option label="一般" value="2"></el-option>
            <el-option label="困难" value="3"></el-option>
          </el-select>
        </el-form-item>
      </el-col>
      <el-col :span="6">
        <el-form-item label="方向">
          <el-select placeholder="请选择" v-model="form.direction">
            <el-option
              v-for="item in list"
              :key="item.id"
              :label="item.direction"
              :value="item.direction"
            ></el-option>
          </el-select>
        </el-form-item>
      </el-col>
      <el-col :span="6">
        <el-form-item label="录入人">
          <el-select placeholder="请选择" v-model="form.creatorID">
            <el-option
              v-for="item in searchList"
              :key="item.id"
              :label="item.creator"
              :value="item.creator"
            ></el-option>
          </el-select>
        </el-form-item>
      </el-col>
    </el-row>

    <el-row>
      <el-col :span="6">
        <el-form-item label="题目备注">
          <el-input v-model="form.remarks"></el-input>
        </el-form-item>
      </el-col>
      <el-col :span="6">
        <el-form-item label="企业简称">
          <el-input v-model="form.shortName"></el-input>
        </el-form-item>
      </el-col>
      <el-col :span="6">
        <el-form-item label="城市" :inline="true">
          <el-row>
            <el-col :span="12">
              <el-select
                placeholder="请选择"
                v-model="form.provinces"
                @change="handleProvince"
              >
                <el-option
                  v-for="(item, index) in provinces"
                  :label="item"
                  :value="item"
                  :key="index"
                ></el-option>
              </el-select>
            </el-col>
            <el-col :span="12">
              <el-select placeholder="请选择" v-model="form.city">
                <el-option
                  v-for="(item, index) in citys"
                  :label="item"
                  :value="item"
                  :key="index"
                ></el-option>
              </el-select>
            </el-col>
          </el-row>
        </el-form-item>
      </el-col>
      <el-col :span="6">
        <el-form-item label="">
          <el-button @click="resetForm">清除</el-button>
          <el-button type="primary" @click="searchQuestion">搜索</el-button>
        </el-form-item>
      </el-col>
    </el-row>
  </el-form>
</template>

<script>
import { provinces, citys } from '../../api/hmmm/citys'
import { choice, list } from '../../api/hmmm/questions'
export default {
  name: 'QuestionChoiceItem',
  props: {
    list: {
      type: Array
    },
    subjectList: {
      type: Array
    },
    keys: {
      type: Number
    },
    page: {
      type: Object
    }
  },
  data () {
    return {
      searchList: [
        {
          id: 1,
          creator: '超级管理员'
        },
        {
          id: 2,
          creator: '录入管理员'
        }
      ],
      form: {
        subject: '',
        subjectID: '',
        direction: '',
        questionType: '',
        province: '',
        city: '',
        chkUser: '',
        tags: '',
        difficulty: '',
        shortName: '',
        remarks: '',
        keyword: '',
        catalogID: null,
        label: '',
        creatorID: null
      },
      citys: [],
      provinces: []
    }
  },
  created () {
    this.getCityData()
    // console.log(this.keys)
  },
  methods: {
    // 获取省
    getCityData: function () {
      this.provinces = provinces()
    },
    // 选省获取到市
    handleProvince: function (e) {
      this.citys = citys(e)
      this.form.city = this.citys[0]
    },
    resetForm () {
      this.form = {
        subject: '',
        direction: '',
        questionType: '',
        province: '',
        city: '',
        chkUser: '',
        tags: '',
        difficulty: '',
        shortName: '',
        remarks: '',
        keyword: '',
        label: '',
        crreatorID: null
      }
      this.searchQuestion()
    },
    async searchQuestion () {
      // 精选题库
      if (this.keys === 1) {
        try {
          const obj = {
            ...this.page,
            count: null,
            subjectID: this.form.subjectID
          }
          const { data } = await choice(obj)
          this.$emit('search', data.items)
        } catch (e) {
          this.$message.error('搜索失败')
        }
      } else {
        // 基础题库
        try {
          const { data } = await list({
            ...this.page,
            count: null,
            subjectID: this.form.subjectID
          })
          this.$emit('search', data.items)
        } catch (e) {
          this.$message.error('搜索失败')
        }
      }
    }
  }
}
</script>

<style lang="less" scoped>
.el-select {
  width: 100%;
}
</style>
